<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Custom DataGrid Pager - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
	href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
	$(function() {
		var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
		pager.pagination({
			buttons : [ {
				iconCls : 'icon-search',
				handler : function() {
					query();
				}
			}, {
				iconCls : 'icon-add',
				handler : function() {
					newUser();
				}
			}, {
				iconCls : 'icon-edit',
				handler : function() {
					editUser();
				}
			} ]
		});
	});
</script>
<script>
	var url;
	function deleteUser() {
		var row = $('#dg').datagrid('getSelected');
		if (row) {
			$.messager.confirm("系统提示", "您确定要删除这条记录吗?", function(r) {
				if (r) {
					$.post('pages/role/delete.do', {
						"delId" : row.roleId
					}, function(result) {
						var result = eval('(' + result + ')');
						if (result.errorMsg) {
							$.messager.alert("系统提示", "已成功删除这条记录!");
							$("#dg").datagrid("reload");
						} else {
							$.messager.alert("系统提示", result.errorMsg);
						}
					});
				}
			});
		}
	}

	function newUser() {
		$("#dlg").dialog('open').dialog('setTitle', '添加用户');
		$('#fm').form('clear');
		url = 'pages/role/save.do';
	}

	function editUser() {
		var row = $('#dg').datagrid('getSelected');
		if (row) {
			$("#dlg").dialog('open').dialog('setTitle', '编辑用户');
			$('#fm').form('load', row);
			url = 'pages/role/edit.do';
		}
	}

	function saveUser() {
		$('#fm').form('submit', {
			url : url,
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (!result.errorMsg) {
					$.messager.alert("系统提示", result.errorMsg);
					return;
				} else {
					$.messager.alert("系统提示", "保存成功");
					$('#dlg').dialog('close');
					$("#dg").datagrid("reload");
				}
			}
		});
	}

	//查询
	function query() {
		$('#dg').datagrid('reload', {
			'roleName' : $("#roleName").val(),
		});
	}
</script>
</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="role.jsp">用户管理</a>
			</li>
		</ul>
	</div>

	<div style="margin: 20px 0;"></div>
	<table id="dg" title="用户管理" toolbar="#toolbar" style="height: 400px"
		data-options="rownumbers:true,singleSelect:true,pagination:true,url:'pages/role/list.do',method:'post'">
		<thead>
			<tr>
				<th data-options="field:'roleId',width:200">角色ID</th>
				<th data-options="field:'number',width:200">角色编号</th>
				<th data-options="field:'roleName',width:200">角色名</th>
			</tr>
		</thead>
	</table>

	<div id="toolbar">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-add" plain="true" onclick="newUser()">添加用户</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="editUser()">编辑用户</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-remove" plain="true" onclick="deleteUser()">删除用户</a>
			角色编号： <input type="text" class="textbox" name="roleName" id="roleName"
			style="width: 110px height :   50px;">&nbsp;&nbsp; 
			<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-search" plain="true" onclick="query()">查询</a>

	</div>

	<div id="dlg" class="easyui-dialog"
		style="width:400px;height:250px;padding:10px 20px" closed="true"
		buttons="#dlg-buttons">
		<form id="fm" method="post">
			<table cellspacing="10px;">
				<tr>
					<td>角色编号：</td>
					<td><input name="number" class="easyui-validatebox"
						style="width: 200px;"></td>
				</tr>
				<tr>
					<td>角色名：</td>
					<td><input name="roleName" class="easyui-validatebox"
						style="width: 200px;"></td>
				</tr>
				<input type="hidden" name="roleId" class="easyui-validatebox"
					style="width: 200px;">
			</table>
		</form>
	</div>

	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-ok" onclick="saveUser()">保存</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">关闭</a>
	</div>
</body>
</html>